<template>
  <div class="count">
    <h2>当前学校：{{ school }}</h2>
    <h2>当前数为：{{ sum }}</h2>
    <h2>当前数组为：{{ arr }}</h2>

    <button @click="add">修改</button>
    <button @click="reset">重置</button>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useCountsStore } from '@/stores/count'
import { storeToRefs } from 'pinia'

// 获取store数据
const countStore = useCountsStore()
console.log(countStore)

// storeToRefs 跟 torefs 功能一样，但他不会包含整个store
const { sum, school, arr } = storeToRefs(countStore)

const add = () => {
  // pina 第1种修改数据方法
  // 直接修改，但他会修改3次
  // countStore.sum++
  // countStore.school = 'YY学校'

  // pina 用 $patch 修改数据方法
  // 它只会有1次的批量修改，所以，有很多数据修改，用它

  // $patch 方式一：对象方式
  // countStore.$patch({
  //   sum: 888,
  //   school: 'YY学校',
  //   arr: [...countStore.arr, 6]
  // })

  // $patch 方式二：函数方式 推荐，更灵活
  countStore.$patch((state) => {
    state.sum = 999
    state.school = 'YY学校'
    state.arr.push(6)
  })


  // pina 第3种修改数据方法，用 action 里面定义的方法
  // countStore.updataSum(666)
}
const reset = () => {

}
</script>

<style lang="scss" scoped>
.count {
  background-color: #5a8cd7;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px;

  select,
  button {
    width: 80px;
    margin: 0 5px;
    height: 30px;
  }
}
</style>
